<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html lang="cn zh">
<head >
    <meta charset="UTF-8">
    <title>填写送货地址</title>
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/css/address.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery-3.2.1.js"></script>
    <script>
        $(function(){
            $("tr>td:first-child").addClass("text1")
            $("tr>td:last-child").addClass("text3")
            $("tr>td:first-child").next().addClass("text2")

            $("[value='下一步']").click(function () {
                var addressId=$("[name=address]").val()
                $("[name=userId]").val(addressId)
                name();
                site();
                postcode();
                mobilePhone();
                if(name()==false||site()==false||postcode()==false||mobilePhone()==false){
                    return false
                }
            })

            $("[name=name]").blur(function () {
                name();
            })
            $("[name=address2]").blur(function () {
                site();
            })
            $("[name=postcode]").blur(function () {
                postcode();
            })
            $("[name=mobilePhone]").blur(function () {
                mobilePhone();
            })

            //选择收件人地址操作
            $("[name=address]").change(function () {
                var addressId=$(this).val();
                $("[name=addressId]").val(addressId)

                if(addressId!=""){
                    $.ajax({
                        type:"GET",
                        url:"/login/addressServlet",
                        dataType:"json",
                        data:{
                            "doType":"doQuery",
                            "type":"doData",
                            "addressId":addressId
                        },
                        success:function (data) {
                            $("[name=name]").val(data[0].name);
                            $("[name=address2]").val(data[0].site);
                            $("[name=postcode]").val(data[0].postcode)
                            $("[name=phone]").val(data[0].phone)
                            $("[name=mobilePhone]").val(data[0].mobilePhone)
                        }
                    })
                }else {
                    $("[name=name]").val("");
                    $("[name=address2]").val("");
                    $("[name=postcode]").val("")
                    $("[name=phone]").val("")
                    $("[name=mobilePhone]").val("")
                }
            })
        })
        //验证收件人是否为空
        function name() {
            if($("[name=name]").val()==""){
                $("[name=name]").parent().next().addClass("text")
                return false;
            }else {
                $("[name=name]").parent().next().removeClass("text")
            }
        }
        //验证收件人地址是否为空
        function site() {
            if($("[name=address2]").val()==""){
                $("[name=address2]").parent().next().addClass("text")
                return false;
            }else {
                $("[name=address2]").parent().next().removeClass("text")
            }
        }
        //验证邮政编码是否为空
        function postcode() {
            if($("[name=postcode]").val()==""){
                $("[name=postcode]").parent().next().addClass("text")
                return false;
            }else {
                $("[name=postcode]").parent().next().removeClass("text")
            }
        }
        //验证收件人手机号码是否为空
        function mobilePhone() {
            if($("[name=mobilePhone]").val()==""){
                $("[name=mobilePhone]").parent().next().addClass("text")
                return false;
            }else {
                $("[name=mobilePhone]").parent().next().removeClass("text")
            }
        }
    </script>
</head>
<body>
    <div id="container"  align="center">
        <!--页面头部栏-->
        <div id="head">
            <iframe src="${pageContext.request.contextPath}/head.jsp" width="100%" height="100%" scrolling="no" frameborder="0">
            </iframe>
        </div>

        <!--注册信息栏-->
        <div id="center">
            <p id="p1">生成订单步骤：<span>1.确认订单</span> > <span style="color:red">2.填写送货地址</span>  >   <span>3.订单成功</span></p>
            <div id="address">
                <span class="span">请选择地址：
                    <select name="address">
                        <option value="">填写新地址</option>
                            <c:forEach items="${address}" var="address" varStatus="st">
                                <option value="${address.addressId}">地址${st.index+1}</option>
                            </c:forEach>
                    </select>
                </span>
                <form method="post" action="/login/addressServlet">
                    <table >
                        <tr>
                            <td>收货人姓名：</td>
                            <td><input name="name"></td>
                            <td>请填写有效收获人姓名</td>
                        </tr>
                        <tr>
                            <td>收件人详细地址：</td>
                            <td><input name="address2"></td>
                            <td>请填写有效的收件人的详细地址</td>
                        </tr>
                        <tr>
                            <td>邮政编码：</td>
                            <td><input name="postcode"></td>
                            <td>请填写有效的收件人的邮政编码</td>
                        </tr>
                        <tr>
                            <td>电话：</td>
                            <td><input name="phone"></td>
                            <td>请填写有效的收件人的电话&nbsp&nbsp&nbsp&nbsp<span style="color: blue">选填项</span></td>
                        </tr>
                        <tr>
                            <td>手机：</td>
                            <td><img src=""><input name="mobilePhone"></td>
                            <td>请填写有效的收件人的手机</td>
                        </tr>
                    </table>
                    <input type="hidden" value="doInsert" name="doType">
                    <input type="hidden" name="addressId">
                    <input type="button" value="取消"> <input type="submit" value="下一步">
                </form>
            </div>
        </div>

        <!--页面脚注栏-->
        <div id="foot">
            <iframe src="${pageContext.request.contextPath}/foot.jsp" width="100%" height="100%" scrolling="no" frameborder="0">
            </iframe>
        </div>
    </div>
</body>
</html>
